// $(function () {

var form = layui.form

function loadLinksInfo() {
    $.ajax({
        type: 'get',
        url: 'admin/links',
        success: function (res) {
            // console.log(res.data);
            // 使用 模板        模板id     遍历数据
            var tags = template('table-tpl', res);  //得到一个字符串

            //让字符串在 这个类名上渲染处html页面
            $('.layui-table tbody').html(tags);
        }
    })
}

//页面一显示就要引用此函数,显示出数据库的类容
loadLinksInfo();

// 删除友情链接
$('.layui-table tbody').on('click', '.delete', function (e) {
    // 得到删除id
    var id = $(e.target).data('id')

    layer.confirm('确实要删除吗？', function (index) {
        $.ajax({
            type: 'delete',
            url: 'admin/links/' + id,
            success: function (res) {
                if (res.status === 0) {
                    // 删除成功
                    layer.close(index);

                    // 删除后再次引用初始函数
                    loadLinksInfo()
                }
            }
        })
    })
})

// 编辑友情链接
$('.layui-table tbody').on('click', '.edit', function (e) {

    // 得到需要编辑的id
    var id = $(e.target).data('id')
    // 获取链接数据
    $.ajax({
        type: 'get',
        url: 'admin/links/' + id,
        success: function (res) {
            var index = layer.open({
                type: 1,
                title: '编辑友情链接',
                content: $('#edit-form-tpl').html(),
                area: ['500px', '350px']
            })
            // 设置预览图片效果
            $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon)
            // 初始化表单数据
            delete res.data.linkicon
            form.val('editForm', res.data)

            // 绑定文件上传按钮点击事件
            $('#urlIcon').click(function () {
                $('#linkFile').click()
            })
            // 监听文件选中事件
            let file = null
            $('#linkFile').change(function (e) {
                const objectURL = URL.createObjectURL(e.target.files[0])
                file = e.target.files[0]
                $('#preIcon').attr('src', objectURL)
            })

            // 绑定表单提交事件
            $('#edit-form').submit(function (e) {
                e.preventDefault()
                var fd = new FormData(this)
                if (file) {
                    fd.append('linkicon', file)
                }
                $.ajax({
                    type: 'put',
                    url: 'admin/links/' + id,
                    data: fd,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.status === 0) {
                            // 编辑成功
                            layer.close(index)
                            loadLinksInfo()
                        }
                    }
                })
            })
        }
    })
})

// 添加友情链接
$('#add-link').click(function () {
    var index = layer.open({
        type: 1,
        title: '添加友情链接',
        content: $('#add-form-tpl').html(),
        area: ['500px', '350px']
    })
    // 绑定文件上传按钮点击事件
    $('#urlIcon').click(function () {
        $('#linkFile').click()
    })
    // 监听文件选中事件
    $('#linkFile').change(function (e) {
        const objectURL = URL.createObjectURL(e.target.files[0])
        $('#preIcon').attr('src', objectURL)
    })
    // 绑定添加链接的提交事件
    $('#add-form').submit(function (e) {
        e.preventDefault()
        var fd = new FormData(this)
        $.ajax({
            type: 'post',
            url: 'admin/links',
            data: fd,
            processData: false,
            contentType: false,
            success: function (res) {
                if (res.status === 0) {
                    // 关闭窗口
                    layer.close(index)
                    // 刷新列表
                    loadLinksInfo()
                }
            }
        })
    })
})

// })
